<template>
    <div
        class="index"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <el-container>
            <el-header style="background:#409EFF;">
                <div class="mentor_header flex_row align_items_center">
                    <el-button
                        type="success"
                        icon="el-icon-house"
                        circle
                        @click="$router.push('/')"
                    ></el-button>
                    <div
                        class="flex_row align_items_center justify_content_between"
                        style="width:60%;margin-left:30px;"
                    >
                        <div class="mentor_header_item">
                            <span>收徒奖励：</span>
                            <span>{{MemberInfo.integral}}</span>
                        </div>
                        <div class="mentor_header_item">
                            <span>收徒码：</span>
                            <span>{{MemberInfo.receiving_code}}</span>
                            <el-button
                                type="success"
                                plain
                                size="mini"
                                class="operate_btn"
                                v-clipboard:copy="copyTxt"
                                v-clipboard:success="onCopy"
                                v-clipboard:error="onError"
                            >复制收徒码</el-button>
                        </div>
                    </div>
                </div>
            </el-header>
            <el-main>
                <div class="mentor_container">
                    <el-tabs
                        type="border-card"
                        stretch
                        v-model="activeName"
                        @tab-click="handleClick"
                    >
                        <el-tab-pane label="首页" name="first">
                            <div class="explanation">
                                <div class="explanation_item">
                                    <div>拜师的好处：</div>
                                    <div>
                                        <span>拜师</span>后可
                                        <span>查看师傅收藏的优质公式</span>，如果师傅偷懒，也可以偷偷更换师傅哦
                                    </div>
                                    <div>
                                        备注：只有
                                        <span>有效徒弟才能查看</span>师傅的
                                        <span>公式</span>哦
                                    </div>
                                </div>
                                <!-- <div class="explanation_item">
                                    <div>收徒的好处：</div>
                                    <span></span>
                                    <div>
                                        在
                                        <span>当月</span>的
                                        <span>最后一天23:59分</span>核实为
                                        <span>有效</span>徒弟后，平台将奖励师傅
                                        <span>20元/位徒弟的奖励</span>。
                                    </div>
                                    <div>
                                        举例：
                                        <span>每月</span>最后一天核实师傅的
                                        <span>有效徒弟为1000人</span>，平台
                                        <span>奖励</span>师傅1000人✖️20元/位=
                                        <span>20000元</span>，如果
                                        <span>保持12个月</span>都有
                                        <span>1000个有效徒弟</span>则可得20000元✖️12个月=
                                        <span>240000元</span>。
                                    </div>
                                </div>-->
                                <!-- <div class="explanation_item">
                                    <div>其他声明：</div>
                                    <div>
                                        1.
                                        <span>有效徒弟</span>指的是
                                        <span>会员</span>时间仍
                                        <span>未到期</span>的用户，若当月最后一天
                                        <span>23:59会员到期</span>，则系统判断徒弟为
                                        <span>失效用户，当月不纳入奖励统计范围内</span>。
                                    </div>
                                    <div>
                                        2.
                                        <span>有效师傅</span>指的是
                                        <span>会员</span>时间仍
                                        <span>未到期</span>的用户，若当月最后一天
                                        <span>23:59会员到期</span>，则系统判定师傅为
                                        <span>失效用户，当月无收徒奖金</span>。
                                    </div>
                                    <div>
                                        3.
                                        <span>拜师</span>成功后至少需要
                                        <span>30天后</span>才能
                                        <span>解除关系</span>。
                                    </div>
                                    <div>
                                        4.
                                        <span>提现</span>可咨询官方
                                        <span>唯一QQ客服(408322304)</span>申请即可
                                    </div>
                                </div>-->
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="拜师" name="second">
                            <div class="apprenticeship">
                                <div class="apprenticeship_top">
                                    <div class="flex_row flex_wrap_no justify_content_center">
                                        <el-input
                                            placeholder="请输入师傅的收徒码"
                                            style="width:200px;margin-right:30px;"
                                            v-model="AcceptCode"
                                            clearable
                                            :disabled="MasterInfo.nickname !==''"
                                        ></el-input>
                                        <!-- <el-button
                                            type="primary"
                                            v-show="MasterInfo.nickname === ''"
                                        >
                                            <i class="el-icon-search el-icon--left"></i>
                                            搜索
                                        </el-button>-->
                                        <el-popconfirm
                                            confirmButtonText="确认"
                                            cancelButtonText="我想想"
                                            confirmButtonType="danger"
                                            icon="el-icon-info"
                                            iconColor="red"
                                            title="确定解除关系？"
                                            @onConfirm="DelForks({act:1,id:MasterInfo.master_id})"
                                        >
                                            <el-button
                                                type="danger"
                                                slot="reference"
                                                v-show="MasterInfo.nickname !== ''"
                                            >
                                                <i class="el-icon-delete el-icon--left"></i>
                                                解除关系
                                            </el-button>
                                        </el-popconfirm>
                                    </div>
                                    <div class="apprenticeship_tips">
                                        <div>一次只能申请一个师傅</div>
                                        <div>对方24小时无反馈则视为拒绝，超时则可再次发起申请</div>
                                        <div>拜师成功后至少需要30天才能接触关系</div>
                                    </div>
                                    <div class="text_center" v-show="MasterInfo.nickname === ''">
                                        <el-button type="primary" @click="applyForMaster">
                                            <i class="el-icon-upload el-icon--left"></i>
                                            拜师
                                        </el-button>
                                        <el-button type="primary" @click="AcceptCode=''">
                                            <i class="el-icon-delete el-icon--left"></i>
                                            重置
                                        </el-button>
                                    </div>
                                </div>
                                <div class="recording_box">
                                    <div
                                        class="recording_item flex_row justify_content_between"
                                        v-for="item in ApplicationList"
                                        :key="item.id"
                                    >
                                        <div
                                            :style="{color:item.state ==='0'?'#000':item.state==='1'?'#67C23A':'#F56C6C'}"
                                            style="font-size:14px;"
                                        >
                                            <span>{{item.nickname}}师傅</span>
                                            <span v-show="item.state === '0'">待通过</span>
                                            <span v-show="item.state === '1'">已通过</span>
                                            <span v-show="item.state === '2'">已拒绝</span>
                                            <span v-show="item.state === '3'">已解除关系</span>
                                            <span v-show="item.state === '4'">无反馈</span>
                                        </div>
                                        <div class="apply_time">申请时间：{{item.created_at}}</div>
                                        <!-- <el-divider></el-divider> -->
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="徒弟" name="third">
                            <div class="apprentice">
                                <div class="flex_row justify_content_center">
                                    <el-radio-group v-model="ApprenticeRadio" @change="radioChange">
                                        <el-radio-button
                                            :label="1"
                                        >有效徒弟{{total.count_1>0?`(${total.count_1})`:""}}</el-radio-button>
                                        <el-radio-button
                                            :label="2"
                                        >失效徒弟{{total.count_2>0?`(${total.count_2})`:""}}</el-radio-button>
                                        <el-radio-button
                                            :label="0"
                                        >待通过{{total.count_0>0?`(${total.count_0})`:""}}</el-radio-button>
                                    </el-radio-group>
                                </div>
                                <div class="log_box">
                                    <div
                                        v-if="DiscipleList.length === 0"
                                        class="text_center"
                                        style="margin:30px 0;color:#909399"
                                    >暂无数据</div>
                                    <div v-else>
                                        <div
                                            class="log_item"
                                            v-for="item in DiscipleList"
                                            :key="item.id"
                                        >
                                            <div class="flex_row justify_content_between">
                                                <div class="log_name">{{item.nickname}}</div>
                                                <div v-show="ApprenticeRadio===0">
                                                    <el-popconfirm
                                                        confirmButtonText="确认"
                                                        cancelButtonText="我想想"
                                                        confirmButtonType="primary"
                                                        icon="el-icon-info"
                                                        iconColor="red"
                                                        title="确定通过申请？"
                                                        @onConfirm="processApply(item.id,1)"
                                                    >
                                                        <el-button
                                                            type="text"
                                                            size="mini"
                                                            slot="reference"
                                                            style="color:#409EFF;"
                                                        >通过</el-button>
                                                    </el-popconfirm>
                                                    <el-popconfirm
                                                        confirmButtonText="确认"
                                                        cancelButtonText="我想想"
                                                        confirmButtonType="danger"
                                                        icon="el-icon-info"
                                                        iconColor="red"
                                                        title="确定拒绝申请？"
                                                        @onConfirm="processApply(item.id,2)"
                                                    >
                                                        <el-button
                                                            type="text"
                                                            size="mini"
                                                            slot="reference"
                                                            style="color:#F56C6C;margin-left:20px;"
                                                        >拒绝</el-button>
                                                    </el-popconfirm>
                                                </div>
                                                <div
                                                    v-show="ApprenticeRadio===1||ApprenticeRadio===2"
                                                >
                                                    <el-popconfirm
                                                        confirmButtonText="确认"
                                                        cancelButtonText="我想想"
                                                        confirmButtonType="danger"
                                                        icon="el-icon-info"
                                                        iconColor="red"
                                                        title="确定解除关系？"
                                                        @onConfirm="DelForks({act:2,id:item.apprentice_id})"
                                                    >
                                                        <el-button
                                                            type="text"
                                                            size="mini"
                                                            slot="reference"
                                                            style="color:#F56C6C;"
                                                        >解除师徒关系</el-button>
                                                    </el-popconfirm>
                                                </div>
                                            </div>
                                            <div class="flex_row justify_content_end expired_time">
                                                <span>会员到期时间:</span>
                                                <span>{{item.grade_expire_time}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="明细" name="fourth">
                            <div class="details">
                                <div class="log" v-if="RewardLogList.length>0">
                                    <div
                                        class="log_item flex_row justify_content_between"
                                        v-for="item in RewardLogList"
                                        :key="item.id"
                                    >
                                        <div class>
                                            <div
                                                :style="{color:item.type==='1'?'#67C23A':'#F56C6C'}"
                                            >{{item.describe}}</div>
                                            <div class="time" v-show="item.type === '1'">
                                                <span>有效徒弟:</span>
                                                <span>{{item.apprentice_num}}</span>
                                            </div>
                                        </div>
                                        <div>
                                            <div
                                                class="price"
                                                :style="{color:item.type==='1'?'#67C23A':'#F56C6C'}"
                                            >{{item.amount}}元</div>
                                            <div class="time">
                                                <span>{{item.type_name}}时间:</span>
                                                <span>{{item.created_at}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div
                                    v-else
                                    class="text_center"
                                    style="margin:30px 0;color:#909399"
                                >暂无数据</div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                    <div class="text_center" style="margin-top:30px;" v-show="activeName!=='first'">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="meta.total"
                            :page-size="10"
                            :hide-on-single-page="!(meta.total>10)"
                            @current-change="paginationChange"
                        ></el-pagination>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script>
let page = 1;
const PAGE_SIZE = 10;
export default {
    props: {},
    data() {
        return {
            loading: false,
            copyTxt: "",
            AcceptCode: "", //收徒码
            ApprenticeRadio: 1, //徒弟标签页，radio值
            activeName: "first", //tabs页值
            MasterInfo: {
                nickname: ""
            }, //我的师傅信息
            ApplicationList: [], //拜师申请列表
            DiscipleList: [], //徒弟列表
            RewardLogList: [], //明细列表
            total: {
                count_0: 0,
                count_1: 0,
                count_2: 0
            },
            MemberInfo: {//用户信息
                receiving_code: "",
                integral: 0.0
            }, 
            meta: {
                total: 0
            }
        };
    },
    computed: {},
    created() {
        this.getMasterInfo();
        this.GetUserInfo();
    },
    mounted() {},
    watch: {},
    methods: {
        radioChange() {
            page = 1;
            this.loading = true;
            this.discipleLog();
        },
        handleClick(tab) {
            // tabs标签页点击事件
            page = 1;
            // if(tab.name === this.activeName){
            //     return false
            // }
            this.loading = true;
            switch (tab.name) {
                case "first":
                    this.loading = false;
                    break;
                case "second":
                    this.getMasterInfo();
                    this.getApprenticeshipList();
                    break;
                case "third":
                    this.discipleLog();
                    this.getMentorCounts();
                    break;
                case "fourth":
                    this.getRewardLog();
                    break;
            }
        },
        paginationChange(val) {
            // 分页事件
            page = val;
            this.loading = true;
            switch (this.activeName) {
                case "second":
                    this.getApprenticeshipList();
                    break;
                case "third":
                    this.discipleLog();
                    break;
                case "fourth":
                    this.getRewardLog();
                    break;
            }
        },
        DelForks(val) {
            // console.log(val)
            this.loading = true;
            this.dissolveRelationship(val.act, val.id);
        },
        applyForMaster() {
            // 拜师申请
            this.$message.closeAll();
            if (this.AcceptCode === "") {
                this.$message.error("请输入师傅的收徒码");
                return false;
            }
            // code=收徒码
            let rsaStr = `code=${this.AcceptCode}`;
            this.$getCode(rsaStr).then(rsaCode => {
                this.http.mentorApply(rsaCode).then(res => {
                    // console.log(res);
                    if (res.data.errno === "000") {
                        this.$message.success(res.data.errmsg);
                        this.AcceptCode = "";
                        page = 1;
                        this.getApprenticeshipList();
                        // this.ApplicationList = res.data.result.data;
                        // this.meta = res.data.result.meta;
                    } else {
                        this.$message.error(res.data.errmsg);
                        // this.ApplicationList = [];
                        // this.meta.total = 0;
                        // this.MasterInfo = {};
                    }
                });
            });
        },
        processApply(id, act) {
            // 处理申请
            // id=(/mentor/list返回的id) act=1通过 2拒绝
            let rsaStr = `id=${id}&act=${act}`;
            this.$getCode(rsaStr).then(rsaCode => {
                this.http.apprenticeshipHandle(rsaCode).then(res => {
                    // console.log(res);
                    this.loading = false;
                    if (res.data.errno === "000") {
                        // this.ApplicationList = res.data.result.data;
                        // this.meta = res.data.result.meta;
                        this.$message.success(res.data.errmsg);
                        if (this.ApplicationList.length === 1) {
                            page = page > 1 ? page - 1 : 1;
                        }
                        this.discipleLog();
                    } else {
                        this.$message.errno(res.data.errmsg);
                        // this.ApplicationList = [];
                        // this.meta.total = 0;
                        // this.MasterInfo = {};
                    }
                });
            });
        },
        getApprenticeshipList() {
            // 获取拜师申请列表
            let rsaStr = `page=${page}&page_size=${PAGE_SIZE}`;
            this.$getCode(rsaStr).then(rsaCode => {
                this.http.mentoRecord(rsaCode).then(res => {
                    // console.log(res);
                    this.loading = false;
                    if (res.data.errno === "000") {
                        this.ApplicationList = res.data.result.data;
                        this.meta = res.data.result.meta;
                    } else {
                        this.ApplicationList = [];
                        this.meta.total = 0;
                        // this.MasterInfo = {};
                    }
                });
            });
        },
        getMasterInfo() {
            // 获取我的师傅信息
            // uuid登陆返回的uuid 必须参数
            let rsaStr = `uuid=${sessionStorage.getItem("u")}`;
            this.$getCode(rsaStr).then(rsaCode => {
                this.http.selfMaster(rsaCode).then(res => {
                    // console.log(res);
                    if (res.data.errno === "000") {
                        this.MasterInfo = res.data.result.data;
                        this.AcceptCode = res.data.result.data.nickname;
                    } else {
                        this.MasterInfo = {
                            nickname: ""
                        };
                    }
                });
            });
        },
        dissolveRelationship(act, id) {
            // 解除师徒关系   act=1解除师傅 2解除徒弟    member_id=即将解除关系的关联用户ID
            let rsaStr = `act=${act}&member_id=${id}`;
            this.$getCode(rsaStr).then(rsaCode => {
                this.http.liftRelieve(rsaCode).then(res => {
                    // console.log(res);
                    this.loading = false;
                    this.$message.closeAll();
                    if (res.data.errno === "000") {
                        this.$message.success(res.data.errmsg);
                        this.MasterInfo =
                            act === 1 ? { nickname: "" } : this.MasterInfo;
                        this.AcceptCode = act === 1 ? "" : this.AcceptCode;
                        // this.MasterInfo = res.data.result.data;
                        // this.AcceptCode = res.data.result.data.nickname;
                        switch (this.activeName) {
                            case "second":
                                this.getApprenticeshipList();
                                break;
                            case "third":
                                if (this.ApplicationList.length === 1) {
                                    page = page > 1 ? page - 1 : 1; //当标签页在第三个时，解除师徒关系后，判断ApplicationList的个数以及page是减一还是维持原数
                                }
                                this.discipleLog();
                                break;
                        }
                    } else {
                        this.$message.error(res.data.errmsg);
                        // this.MasterInfo = {};
                    }
                });
            });
        },
        discipleLog() {
            // 获取徒弟列表数据
            //  state=类型(0为待通过,1为有效徒弟,2为失效徒弟)
            let rsaStr = `state=${this.ApprenticeRadio}&page=${page}&page_size=${PAGE_SIZE}`;
            // console.log(rsaStr);
            this.$getCode(rsaStr).then(rsaCode => {
                this.http.apprenticeList(rsaCode).then(res => {
                    // console.log(res);
                    this.loading = false;
                    this.$message.closeAll();
                    if (res.data.errno === "000") {
                        // this.$message.success(res.data.errmsg);
                        this.DiscipleList = res.data.result.data;
                        this.meta = res.data.result.meta;
                    } else {
                        this.DiscipleList = [];
                        this.meta.total = 0;
                        // this.$message.error(res.data.errmsg);
                        // this.MasterInfo = {};
                    }
                });
            });
        },
        getRewardLog() {
            // 获取用户信息
            let rsaStr = `page=${page}&page_size=${PAGE_SIZE}`;
            this.$getCode(rsaStr).then(rsaCode => {
                this.http.rewardLog(rsaCode).then(res => {
                    this.loading = false;
                    if (res.data.errno === "000") {
                        this.RewardLogList = res.data.result.data;
                        this.meta = res.data.result.meta;
                    } else {
                        this.meta.total = 0;
                    }
                });
            });
        },
        GetUserInfo() {
            // 获取用户信息
            // uuid登陆返回的uuid 必须参数
            let rsaStr = `uuid=${sessionStorage.getItem("u")}`;
            this.$getCode(rsaStr).then(rsaCode => {
                this.http.getMemberInfo(rsaCode).then(res => {
                    if (res.data.errno === "000") {
                        this.MemberInfo = res.data.result.data;
                        this.copyTxt = res.data.result.data.receiving_code;
                    } else {
                        this.MemberInfo = {};
                        this.copyTxt = "";
                        // this.newsList = [];
                    }
                });
            });
        },
        getMentorCounts() {
            // 获取徒弟列表各类型数量
            let rsaStr = `timestamp=${Number(new Date())}`;
            this.$getCode(rsaStr).then(rsaCode => {
                this.http.mentorCounts(rsaCode).then(res => {
                    if (res.data.errno === "000") {
                        this.total = res.data.result.data;
                    } else {
                        // this.newsList = [];
                    }
                });
            });
        },
        onCopy() {
            // //console.log(this.$refs.copy.innerText)
            this.$message.closeAll();
            this.$message.success("复制成功");
        },
        onError() {
            this.$message.closeAll();
            this.$message.error("复制失败，请重试");
        }
    },
    components: {}
};
</script>

<style scoped lang="less">
@import url("./index.less");
</style>
